<template>
  <div class="step-qqt">
    <el-row type="flex" align="middle">
      <el-col :span="18">
        <div class="qqt-title">
          <span class="label">请求头参数</span>
          <i
            v-if="!isView"
            class="el-icon-plus text-success add"
            @click="handleAdd('qqtIn')"
          ></i>
        </div>
      </el-col>
    </el-row>
    <el-table :data="fbOptions.formData.reqHeaderList" style="margin: 10px 0">
      <el-table-column label="参数名" prop="nodeName" width="150"/>
      <el-table-column
        label="参数描述"
        prop="nodeLabel"
        :show-overflow-tooltip="true"
        min-width="150"
      />
      <el-table-column label="参数类型" prop="nodeType" width="150">
        <template #default="scope">
          <span>{{ selectDictLabel(fbOptions.keyTypeList, scope.row.nodeType) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否必须" prop="nodeNeededable">
        <template #default="scope">
          <yes-no-tag
            yesText="是"
            noText="否"
            :value="scope.row.nodeNeededable || ''"
          />
        </template>
      </el-table-column>
      <el-table-column label="是否必填" prop="nodeValueable">
        <template #default="scope">
          <yes-no-tag
            yesText="是"
            noText="否"
            :value="scope.row.nodeValueable || ''"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="校验规则"
        prop="nodeCheckRegex"
        :show-overflow-tooltip="true"
        min-width="200"
      />
      <el-table-column label="操作" width="220" v-if="!isView">
        <template #default="scope">
          <text-edit-button @click="handleEdit(scope.row, 'qqtIn')"/>
          <text-delete-button
            :title="'是否确认删除' + scope.row.nodeName + '?'"
            @click="handleDelete(scope.row, 'qqtIn')"
          />
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" align="middle">
      <el-col :span="18">
        <div class="qqt-title">
          <span class="label">响应头参数</span>
          <i
            v-if="!isView"
            class="el-icon-plus text-success add"
            @click="handleAdd('qqtOut')"
          ></i>
        </div>
      </el-col>
    </el-row>
    <el-table :data="fbOptions.formData.resHeaderList" style="margin: 10px 0">
      <el-table-column label="参数名" prop="nodeName" width="150"/>
      <el-table-column
        label="参数描述"
        prop="nodeLabel"
        :show-overflow-tooltip="true"
        min-width="200"
      />
      <el-table-column label="参数类型" prop="nodeType" width="150">
        <template #default="scope">
          <span>{{ selectDictLabel(fbOptions.keyTypeList, scope.row.nodeType) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否必须" prop="nodeNeededable">
        <template #default="scope">
          <yes-no-tag
            yesText="是"
            noText="否"
            :value="scope.row.nodeNeededable || ''"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="220" v-if="!isView">
        <template #default="scope">
          <text-edit-button @click="handleEdit(scope.row, 'qqtOut')"/>
          <text-delete-button
            :title="'是否确认删除' + scope.row.nodeName + '?'"
            @click="handleDelete(scope.row, 'qqtOut')"
          />
        </template>
      </el-table-column>
    </el-table>

    <add-params
      ref="addParamsRef"
      :title="title"
      :modelType="modelType"
      v-model:visible="visible"
      :nodeTypeList="nodeTypeList"
      :rules="rules"
      :initData="initData"
      @onOk="onOk"
    />
  </div>
</template>

<script>
import {
  reqInParamInsert,
  resOutParamInsert,
  reqInUpdateById,
  resOutUpdateById,
  reqInDeleteByIds,
  resOutDeleteByIds,
  saveChangeHeaderIn,
  saveChangeHeaderOut,
  searchChangeHeaderIn,
  searchChangeHeaderOut, reqHeaderSearch,resHeaderSearch
} from "@slc/api/slc/inventory";
import AddParams from "./add-params.vue";

export default {
  name: "step-qqt",
  components: {AddParams},
  props: {
    formData: {
      type: Object,
      default: () => {
      }
    },
    fbOptions: {
      type: Object,
      default: () => {
      }
    },
  },
  data() {
    return {
      nodeTypeList: [
        {dictValue: "string", dictLabel: "字符串 (String)"},
        {dictValue: "long", dictLabel: "整数 (Long)"},
        {dictValue: "decimal", dictLabel: "小数 (Decimal)"},
      ],
      rules: {
        nodeType: [
          {required: true, message: "参数类型不可以为空", trigger: "blur"},
        ],
        nodeName: [
          {required: true, message: "参数名不可以为空", trigger: "blur"},
        ],
        nodeLabel: [
          {required: true, message: "参数描述不可以为空", trigger: "blur"},
        ],
        // nodeCheckRegex: [
        //   { required: true, message: "校验规则不可以为空", trigger: "blur" },
        // ],
      },
      initData: {},
      modelType: "",
      title: "",
      type: "add",
      visible: false,
      changeTitle: "",
      changeType: "",
      apiInChangeTable: [],
      apiOutTable: [],
      serviceOutChangeTable: [],
    };
  },
  computed: {
    isView() {
      return (
        this.fbOptions.operationType === "view"
      );
    },
  },
  activated() {
    this.getHeaderData({serviceVerId: this.formData.serviceVerId});
  },
  methods: {
    async getHeaderData(params, show = {req: true, res: true}) {
      if (show.req) {
        const res = await reqHeaderSearch(params)
        this.$set(this.fbOptions.formData, 'reqHeaderList', res.data || [])
      }
      if (show.res) {
        const res2 = await resHeaderSearch(params)
        this.$set(this.fbOptions.formData, 'resHeaderList', res2.data || [])

      }
    },
    // ...mapActions("service", ["getReqHeaderData", "getResHeaderData"]),
    handleAdd(key) {
      this.type = "add";
      this.$refs["addParamsRef"].onReset();
      switch (key) {
        case "qqtIn":
          this.title = "新增请求头参数";
          break;
        case "qqtOut":
          this.title = "新增响应头参数";
          break;
        default:
          break;
      }
      this.initData = {
        nodeType: "",
        nodeName: "",
        nodeLabel: "",
        nodeCheckRegex: "",
        nodeValueable: true,
        nodeNeededable: true,
      };
      this.modelType = key;
      this.visible = true;
    },
    handleEdit(row, key) {
      this.type = "edit";
      this.initData = {
        headerId: row.headerId,
        nodeType: row.nodeType,
        nodeName: row.nodeName,
        nodeLabel: row.nodeLabel,
        nodeCheckRegex: row.nodeCheckRegex,
        nodeValueable: row.nodeValueable === "Y",
        nodeNeededable: row.nodeNeededable === "Y",
      };
      switch (key) {
        case "qqtIn":
          this.title = "修改请求头参数";
          break;
        case "qqtOut":
          this.title = "修改响应头参数";
          break;
        default:
          break;
      }
      this.modelType = key;
      this.visible = true;
    },
    async handleDelete(row, key) {
      this.type = "delete";
      let fn;
      key === "qqtIn" ? (fn = reqInDeleteByIds) : (fn = resOutDeleteByIds);
      const res = await fn(row.headerId);
      if (res.code === "200") {
        this.msgSuccess("删除成功");
        if (key === "qqtIn") {
          this.getHeaderData({serviceVerId: this.formData.serviceVerId}, {req: true, res: false});
        } else if (key === "qqtOut") {
          this.getHeaderData({serviceVerId: this.formData.serviceVerId}, {req: false, res: true});
        }
      }
    },
    async onOk(formData) {
      const params = {
        serviceVerId: this.formData.serviceVerId,
        ...formData,
        nodeNeededable: formData.nodeNeededable ? "Y" : "N",
        nodeValueable: formData.nodeValueable ? "Y" : "N",
        nodeCheckRegex:
          formData.nodeType === "string" || formData.elementType === "string"
            ? formData.nodeCheckRegex
            : "",
      };
      let fn;
      if (this.type === "add") {
        fn = this.modelType === "qqtIn" ? reqInParamInsert : resOutParamInsert;
      } else if (this.type === "edit") {
        fn = this.modelType === "qqtIn" ? reqInUpdateById : resOutUpdateById;
      }
      const res = await fn(params);
      if (res.code === "200") {
        this.visible = false;
        this.msgSuccess(this.type === "add" ? "新增成功" : "修改成功");
        if (this.modelType === "qqtIn") {
          this.getHeaderData({serviceVerId: this.formData.serviceVerId}, {req: true, res: false});
        } else if (this.modelType === "qqtOut") {
          this.getHeaderData({serviceVerId: this.formData.serviceVerId}, {req: false, res: true});
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.step-qqt {
  padding: 0 24px;

  .qqt-title {
    display: flex;
    align-items: center;
    gap: 8px;

    .label {
      font-size: 18px;
    }

    .add {
      cursor: pointer;
      font-size: 24px;
      font-weight: 700;
    }
  }

  .flex-end {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
